<template>
  <view class="radio" :style="{
    width: `${getSize}rpx`,
    height: `${getSize}rpx`,
    borderRadius: `${getSize}rpx`,
    border: `${getBorder}rpx solid ${getBackground}`,
    background: check ? getBackground : 'transparent',
  }" @tap.stop="isChange"
  >
    <slot>
      <uni-icons v-if="check" type="checkmarkempty" color="#fff" :size="~~(getSize / 2.8)" />
    </slot>
  </view>
</template>

<script>
export default {
  props: ['select', 'isRadio', 'value', 'size', 'background', 'boder', 'isChecked'],
  data() {
    return {
      check: false
    }
  },
  computed: {
    getSize() {
      return this.size ? Number.parseFloat(this.size) : 40
    },
    getBackground() {
      return this.background || '#36b39b'
    },
    getBorder() {
      return this.boder ? Number.parseFloat(this.boder) : 2
    }
  },
  watch: {
    select: {
      handler(nVal) {
        this.check = !!nVal
      },
      immediate: true
    }
  },
  methods: {
    isChange() {
      /* 只能被选中，不能取消，取消由父元素决定 */
      if (this.isRadio) {
        if (!this.check) {
          this.$emit('change', { status: this.check, value: this.value })
        }
        return
      }
      /* 为true选中状态交给父元素决定 */
      if (!this.isChecked) {
        this.check = !this.check
      }
      this.$emit('change', { status: this.check, value: this.value })
    }
  }

}
</script>

<style scoped>
.radio {
  display: flex;
  justify-content: center;
  align-items: center;
}

.check {
  background-color: #36b39b;
}
</style>
